React 最佳实践

整体结构

class List extends React.Component {
    
    static propTypes = {
        size: React.PropTypes.oneOf(['large', 'normal', 'small']),
        shape: React.PropTypes.oneOf(['default', 'primary', 'ghost'])
        disabled: React.PropTypes.bool
    };

    static defaultProps = {
        size: 'normal',
        shape: 'default',
        disabled: false
    };
    
    constructor(props) {
        super(props);
        this.state = {
            foo: 'bar'
        };
    }
    
    render() {
        return <div>{this.state.foo}</div>;
    }   
}

基础规范

• React组件文件使用.jsx扩展名；

• 对外暴露的文件名使用index；

• React组件名使用驼峰命名，首字母大写，实例名首字母小写；

• 每个文件只写一个组件，但多个无状态组件可以放在一个文件中；

方法顺序

propTypes
defaultProps
constructor()
getChildContext()
componentWillMount()
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
componentDidUpdate()
componentWillUnmount()
render()

引号

JSX属性值使用双引号，其他均使用单引号；

<Foo bar="bar" />
<Foo style={{ left: '20px' }} />

空格

• 总是在自闭合的标签/>前加一个空格；

• 不要在JSX{}引用括号里两边加空格。

<Foo />
<Foo bar={baz} />

括号

将多行的JSX标签写在()里；

render() {
    return (<MyComponent className="long body" foo="bar">
        <MyChild />
    </MyComponent>);
}

标签

对于没有子元素的标签来说总是闭合的；

<Foo className="stuff" />

组件定义

如果有内部状态、方法或是要对外暴露ref的组件，使用ES6 Class写法；

class List extends React.Component {
    // ...
    render() {
        return <div>{this.state.hello}</div>;
    }
}

否则的话，使用函数写法；

const List = ({ hello }) => (
    <div>{hello}</div>
);

PropsType 和 DefaultProps 写法

如果有内部状态、方法或是要对外暴露ref的组件，使用ES7类静态属性写法；
JSX属性名使用驼峰式风格。
如果属性值为true, 可以直接省略。

class Button extends Component {
    static propTypes = {
        size: React.PropTypes.oneOf(['large', 'normal', 'small']),
        shape: React.PropTypes.oneOf(['default', 'primary', 'ghost'])
        disabled: React.PropTypes.bool
    };

    static defaultProps = {
        size: 'normal',
        shape: 'default',
        disabled: false
    };

    render() {
        // ....
    }
}

否则的话，使用类静态属性写法

const HelloMessage = ({ name }) => {
    return <div>Hello {name}</div>;
};

HelloMessage.propTypes = {
    name: React.PropTypes.string
};

HelloMessage.defaultProps = {
    name: 'vic'
};

State 写法

使用ES7实例属性提案声明写法或者构造函数声明写法，后者适合需要进行一定计算后才能初始化state的情况。

class Some extends Component {
    state = {
        foo: 'bar'
    };
    // ....
}

class Some extends Component {
    constructor(props) {
        super(props);
        this.state = {
            foo: 'bar'
        };
    }
    // ....
}

函数绑定

在使用ES6编写React时，不会将方法内部的作用域自动绑定到组件的引用上。
为此有以下几种写法仅供参考：

参考

• Airbnb React/JSX Style Guide

• Airbnb React/JSX Style Guide 中文版

• React on ES6+